<template>
	<view>
		<page-header :headInfo="headInfo"></page-header>
		<anniver-toast :annInfo="info" @FcloseToast="exitToast" v-if="isToast"></anniver-toast>
		<view class="wrap">
			<view class="wrap_card">
				<view>我们在一起</view>
				<view><text>{{bind_time ? bind_time : 0}}</text>天</view>
				<view>起始日 {{start_time ? start_time : '0000-00-00'}}</view>
			</view>
			<view class="wrap_card_list">
				<view class="card_list_item" @tap="anniverInfo" data-id="0">
					<view>我们在一起</view>
					<view style="font-size: initial;font-weight: initial;">{{bind_time ? bind_time : 0}}</text>天</view>
				</view>
				<view class="card_list_item" v-for="(item,index) in list" @tap="anniverInfo" :data-id="item.id">
					<view>{{item.title}}</view>
					<view>+</view>
				</view>
			</view>
			
			<view class="addBtn" @tap="exitToast">+</view>
		</view>
	</view>
</template>

<script>
	import anniverToast from '@/components/anniver/anniver-toast.vue';
	export default {
		components: {
			anniverToast
		},
		data() {
			return {
				headInfo: {
					type: 1,
					title: '纪念日'
				},
				bind_time:0,
				start_time:'0000-00-00',
				list: [],
				info: {
					date: this.getDate()
				},
				isToast: false
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.anniverList();
		},
		methods: {
			/**
			 * @author smallfour
			 * @description 纪念日列表
			 */
			anniverList:function(){
				this.$api.anniverList({}).then(res => {
					if(res.code == 200){
						this.bind_time = res.data.bind_time;
						this.start_time = res.data.start_time;
						this.list = res.data.data;
					}
				})
			},
		
			/**
			 * @author smallfour
			 * @description 纪念日详情
			 */
			anniverInfo:function(e){
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url:'/pages/home/sweetDayDec?id=' + id
				})
			},
			
			/**
			 * @author smallfour
			 * @description 打开关闭纪念日
			 */
			exitToast: function() {
				this.isToast = this.isToast ? false : true;
				if(!this.isToast){
					this.anniverList();
				}
			},
			
			/**
			 * @author smallfour
			 * @description 获取时间
			 */
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		margin: 0 30rpx;
		padding-bottom: 30rpx;
		.wrap_card{
			padding:40rpx 0;
			background: linear-gradient(45deg,#ffa7cd,#ff53a1);
			border-radius: 20rpx;
		}
		.wrap_card>view{
			font-size: 34rpx;
			color:#fff;
			line-height: 90rpx;
			margin-left:50rpx;
		}
		.wrap_card>view>text{
			font-size: 60rpx;
			margin-right:10rpx;
		}
		.wrap_card_list>view{
			margin-top:50rpx;
			box-shadow: 0 0 10rpx #ccc;
			line-height: 100rpx;
			height:100rpx;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:0 30rpx;
		}
		.card_list_item>view:nth-child(2){
			font-size: 40rpx;
			font-weight: bold;
		}
		
		.addBtn{
			position: fixed;
			bottom: 50rpx;
			left: calc(50% - 50rpx);
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50%;
			font-size: 70rpx;
			background:#000000;
			color: #FFFFFF;
		}
	}
	
	
</style>
